body.not-allow-scroll {
  overflow: hidden !important;
}

.chat-iframe-container {
  position: fixed;
  --top-size: initial;
  --bottom-size: 30vh;
  --transition-time: .3s;
  top: var(--top-size);
  bottom: var(--bottom-size);
  right: 26px;

  overflow: hidden;
  box-shadow:
    0px 1px 20px 1px rgba(0, 0, 0, 0.05),
    0px 1px 6px -1px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  transition: all var(--transition-time) ease;


  &.hide {
    display: none;
  }

  &[data-mode="full-screen"] {
    width: 100%;
    height: 100%;
    right: 0;
    border-radius: 0;
  }

  &[data-mode="medium-screen"] {
    width: max(min(40vw, 558px), 400px);
    height: 54vh;
  }

  &[data-mode="medium-screen"] {
    height: calc(100vh - 86px);
  }

  &[data-mode="mini-screen"] {
    width: 66px;
    height: 66px;
    box-shadow: none;

    cursor: pointer;

    // &:hover,

    &.moving {
      cursor: grabbing;
      transition: none;
    }

    .chat-iframe {
      opacity: 0;
    }

    &[data-scene="app-preview-use"] {
      width: 0;
      height: 0;
    }
  }

  &[data-scene="app-preview-use"],
  &:not([data-mode="mini-screen"]) {

    .chat-iframe-float-icon {
      opacity: 0;
      visibility: hidden;
    }
  }
}

.chat-iframe {
  border: none; 
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 300px;
  transition: opacity var(--transition-time) ease;
  background-color: #fff;
}

.chat-iframe-float-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 66px;
  height: 66px;
  object-fit: cover;
  transition: opacity var(--transition-time) ease;
}
